<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 200px;
            height: 100px;
            background-color: aquamarine;
        }
        p{
            background-color: thistle;
        }
    </style>
</head>
<body>

    <ul id="ul">
        <li><a href="#">一个超链接</a></li>
        <li><a href="#">一个超链接</a></li>
        <li><a href="#">一个超链接</a></li>

    </ul>
    <button id="btn">添加一个超链接</button>


    <div id="box">
        点击p：div点击事件委派
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <script>
        window.onload = function(){

            var ul = document.getElementById("ul");
            var allA = document.getElementsByTagName("a");
            // for(let i = 0 ;i<allA.length;i++){
            //     allA[i].onclick = function (){
            //         console.log("超链接");
            //     }
            // }
                
            var btn = document.getElementById("btn");
            btn.onclick = function(){
                var li =document.createElement("li");
                li.innerHTML = "<a href='#'>新建的超链接</a>"
                ul.appendChild(li)
            }
            
            /**
             * 事件的委派
             *   指将事件统一绑定给元素的祖先元素，这样的=当后代元素上的事件触发时，会一直冒泡到祖先元素
             *     从而通过祖先元素的响应函数来处理事件
             *   事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能       
             * 
            */
            ul.onclick = function(a){
                console.log("超链接集");
                console.log(a.target);
            }
       
       
            var box = document.getElementById("box")
            box.onclick = function (){
                console.log("div点击事件委派给p");
            }
       
       
       
       
       
       
       
       
        }
    </script>
</body>
</html>